<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>营业额数据</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script src="../backend/plugins/axios/axios.min.js"></script>
</head>
<body>

<div style="line-height: 70px">
    <th width="120">选择时间:</th>

    <select name="classFirst" id="classFirst" onchange="selectSecondClass(this.value)" width="120">
        <option>--请选择--</option>
        <option value="3">近七天</option>
        <option value="1">今天</option>
        <option value="2">昨天</option>
        <option value="4">近一个月</option>
    </select>
<!--    <button onclick="test(1)">sadsa</button>-->

    <script>
        function selectSecondClass(v) {
            window.location.href="http://localhost:8084/echart/chart?v="+v
            // console.log("v+====>" + v)
            // axios.get("/echart/chart?v=" + v).then(res => {
            //     console.log("vvvvvv")
            //     window.location.href="http://localhost:8084/echart/chart?v="+v
            // })
        }
    </script>
</div>

<div id="main" style="width: 800px;height:600px;"></div>
<script th:inline="javascript">
    /*<![CDATA[*/
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 假设从后端传递了一个名为chartData的变量，它包含了ECharts所需的数据
    var chartData = [[${chartData}]]; // 使用Thymeleaf语法插入数据

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '营业额数据'
        },
        tooltip: {},
        legend: {
            data: ['营业额']
        },
        xAxis: {
            data: chartData.dataTimes // 类别数据
        },
        yAxis: {},
        series: [{
            name: '营业额',
            type: 'bar',
            data: chartData.values // 数值数据
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    /*]]>*/
</script>
</body>
</html>
